import editorStyle from '../style/default-style';
import G6, {Graph, IGroup, IShape, ModelConfig} from '@antv/g6';
import {Item} from '@antv/g6-core/lib/types';

const startDefaultOptions = {
    icon: null,
    iconStyle: {
        width: 18,
        height: 18,
        left: 6,
        top: 6,
    },
    style: {
        ...editorStyle.nodeStyle,
        fill: '#e8f5e9',
        stroke: '#4caf50',
        cursor: 'default',
    },
    stateStyles: {
        selected: {
            fill: '#a5d6a7',
        },
        hover: {
            cursor: editorStyle.cursor.hoverNode,
        }
    }
};

export default function () {

    G6.registerNode('anchor', {
        shapeType: 'circle',
        labelPosition: 'bottom',
        options: {
            ...startDefaultOptions
        },
        getShapeStyle(cfg: ModelConfig) {
            cfg.size = [30, 30];
            const width = cfg.size[0];
            return {
                x: 0,
                y: 0,
                r: width / 2,
                ...startDefaultOptions.style,
            };
        },
        /**
         * 绘制节点，包含文本
         * @param  {Object} cfg 节点的配置项
         * @param  {G.Group} group 图形分组，节点中的图形对象的容器
         * @return {G.Shape} 绘制的图形，通过 node.get('keyShape') 可以获取到
         */
        draw(cfg: ModelConfig | undefined, group: IGroup | undefined): IShape {
            const shape = group?.addShape('circle', {
                draggable: true,
                attrs: {
                    x: 0,
                    y: 0,
                    r: 10,
                    fill: '#c8e6c9',
                    stroke: '#66bb6a',
                    lineWidth: 1
                }
            });

            return shape as IShape;
        },
        /**
         * 绘制后的附加操作，默认没有任何操作
         * @param  {Object} cfg 节点的配置项
         * @param  {G.Group} group 图形分组，节点中的图形对象的容器
         */
        afterDraw(cfg: ModelConfig | undefined, group: IGroup | undefined) {
        },
        getAnchorPoints() {
            return [

            ];
        },
        /**
         * 设置节点的状态，主要是交互状态，业务状态请在 draw 方法中实现
         * 单图形的节点仅考虑 selected、active 状态，有其他状态需求的用户自己复写这个方法
         * @param  {String} name 状态名称
         * @param  {Object} value 状态值
         * @param  {Node} node 节点
         */
        setState(name: string | undefined, value: string | boolean | undefined, node: Item | undefined) {


        },
    });
}
